import React from "react";
import {observer, inject} from 'mobx-react';
import {toJS} from "mobx";
import {withRouter} from 'react-router-dom';
import { RouteLayout, Form} from "weaver-mobile-page";
import {Tools} from 'weaver-mobile';

const getLabel = Tools.getLabel;
const ButtonGroup = RouteLayout.ButtonGroup;
@inject("updateOperatorStore")
@withRouter
@observer
export default class UpdateOperator extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className={"updateOperator-advanceSearch"}>
                {this.showSelectNodeCom()}
                <ButtonGroup
                    data={this.getButtons()}
                    flexStyles={this.getFlextStyles()}
                />
            </div>
        );
    }

    showSelectNodeCom = () => {
        const {updateOperatorStore} = this.props;
        const {form} = updateOperatorStore;
        const {isInit = false} = form;
        let formContent = <div></div>;
        if (isInit) {
            formContent = <Form store={form} />
        }
        return formContent;
    }

    /**
     * 取消
     */
    onCancel = () => {
        this.props.history.go(-1);
    }

    onSearch = () => {
        const {updateOperatorStore} = this.props;
        const {loaddatas} = updateOperatorStore;
        typeof loaddatas == "function" && loaddatas();
        this.onCancel();
    }

    /**
     * 底部按钮
     * @returns {Array}
     */
    getButtons = () => {
        const {updateOperatorStore} = this.props;
        const {resetForm} = updateOperatorStore;
        let buttons = [];
        buttons.push({
            key: 'clear',
            text: getLabel(2022, "重置"),
            onClick: resetForm,
        });
        buttons.push({
            key: 'submit',
            text: getLabel(387355, "搜索"),
            onClick: () => {
                this.onSearch()
            },
            type: 'primary',
        });
        return buttons;
    }

    /**
     * 显示按钮样式
     * @returns {{style: {flex: number}}[]}
     */
    getFlextStyles = () => {
        const flextStyles = [{
            style: {flex: 1}
        }, {
            style: {flex: 1}
        }
        ];
        return flextStyles;
    }
}